<template>
    <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts/core';
import titleIcon from '@/assets/images/titleIcon.png';
import {
    CanvasRenderer
} from 'echarts/renderers';
import {
    BarChart
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
} from 'echarts/components';
import { use } from 'echarts/core';

// 导入所需组件
use([
    CanvasRenderer,
    BarChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
]);

const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
});

const chartContainer = ref(null);
let chartInstance = null;
// 动态生成渐变色
function getGradientColor(index: number, value: number): echarts.graphic.LinearGradient {
  let startColor: string;
  let endColor: string;

  switch (index) {
    case 0:
      startColor = '#55B68B';
      endColor = '#4EA775';
      break;
    case 1:
      startColor = '#3560F6';
      endColor = '#69D0FF';
      break;
    case 2:
      startColor = '#FA880E';
      endColor = '#F4BA43';
      break;
  }

  return new echarts.graphic.LinearGradient(
    0, 0, 0, 1, // 渐变方向，从上到下
    [
      { offset: 0, color: startColor }, // 起始颜色
      { offset: 1, color: endColor }  // 结束颜色
    ]
  );
}
const initChart = () => {
    chartInstance = echarts.init(chartContainer.value);
    
    const stackedBarOptions = {
        title: {
            text:  `{icon|}{text|地震空间统计}`,
            textStyle: {
                rich: {
                    icon: {
                        backgroundColor: {
                            image: titleIcon
                        },
                        width: 16,
                        height: 16,
                        align: 'center',
                        verticalAlign: 'middle',
                    },
                    text: {
                        color: '#333',
                        fontSize: 16,
                        align: 'left',
                        verticalAlign: 'middle',
                        padding:[4, 0, 0, 4]
                    }
                }
            },
            left: 'left',
            top: 'top'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: props.data.chartData.map((dataset, index) => ({
              name: dataset.name,
              textStyle: {
                color: '#333333' // 默认黑色文字
              },
              itemStyle: {
                color: getGradientColor(index, 0), // 图例颜色
              },
              icon: 'roundRect',
              symbolSize: 10,
            })),
            right: '2%',

        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data:props.data.provinceData,
            axisTick:{
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                  color: '#D9E1F3', // 设置 x 轴线的颜色
                  width: 1 // 设置 x 轴线的宽度
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                  color: '#999999',
                  fsize: 12
                },
                rotate: -45, 
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#D9E1F3',
                }
            },
            axisTick:{
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                  color: '#D9E1F3', // 设置 x 轴线的颜色
                  width: 1 // 设置 x 轴线的宽度
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                  color: '#999999',
                  fsize: 12
                },
            }
        },
        series: props.data.chartData.map((dataset, index) => ({
            name: dataset.name,
            type: 'bar',
            stack: 'total',
            emphasis: {
                focus: 'series'
            },
            data:dataset.data,
            barMaxWidth: 20, // 设置条形图的最大宽度为50像素
            itemStyle: {
              color: (params: any) => getGradientColor(index, params.value)
            }
        })),
    };

    chartInstance.setOption(stackedBarOptions);
};

const resizeChart = () => {
    chartInstance.resize();
};

watch(() => props.data, () => {
    initChart();
}, { deep: true });

onMounted(() => {
    initChart();
    window.addEventListener('resize', () => {
        resizeChart()
    });
});

onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 400px;
}
</style>